<template>
  <div id="app">
    <!-- 第一行 -->
    <el-row :gutter="24">
      <el-col :span="10">
        <el-card style="height: 354px">
          <div class="title">精选</div>
          <!-- 轮播图 -->
          <div class="block" style="width: 384px; margin: 10px auto 0">
            <el-carousel height="240px">
              <el-carousel-item v-for="item in news" :key="item.index">
                <a :href="item.url" target="_blank">
                  <img :src="item.pic" style="height: 100%" />
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card>
          <div class="fontClass1">年度居民消费价格指数</div>
          <div class="fontClass2">100.3</div>
          <div id="yearcpilin" style="width: auto; height: 200px"></div>
          <div class="fontClass3">我国cpi每五年进行一次基期轮换</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row :gutter="12" style="margin-top: 15px">
      <el-card style="width: 100%; height: 600px">
        <el-row>
          <el-col :span="16">
            <p style="font-size: 18px">{{ date }}月份全国各省居民消费指数</p>
          </el-col>
          <el-col :span="8">
            <el-select v-model="queryParams.mname" placeholder="请选择月份" filterable @change="monthChanged">
              <el-option v-for="item in monthList" :key="item.mid" :label="item.mname" :value="item.mname"> </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16">
            <div id="bar" style="width: 100%; height: 500px"></div>
          </el-col>
          <el-col :span="8">
            <div>
              <dv-scroll-ranking-board :config="config" style="width: 100%; height: 450px" />
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-row>

    <!-- 第三行 -->
    <el-row :gutter="24" style="margin-top: 15px">
      <el-col :span="9">
        <el-card>
          <div class="fontClass1">本月居民消费价格指数</div>
          <div class="fontClass2">102.8</div>
          <div id="monthcpiins" style="width: auto; height: 200px"></div>
          <div class="fontClass3">年同比 ：12% ▲ 月同比 ：11% ▼ | 月均CPI指数：100.2</div>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card>
          <div class="fontClass1">各类居民消费价格指数</div>
          <div class="fontClass2">101.9</div>
          <div id="catecpibar" style="width: auto; height: 200px"></div>
          <div class="fontClass3">PP-CPINLDS ：60%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="fontClass1">CPI动态演化分析</div>
          <div class="fontClass2">78%</div>
          <div id="trendscpipol" style="width: auto; height: 200px"></div>
          <div class="fontClass3">同周比 ：12% ▼ 日环比 ：80% ▲</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { listMonth, listMCpi } from '@/api/cpi/cpi'
export default {
  name: 'Index',
  data() {
    return {
      // 轮播图数据
      news: [
        { index: 1, pic: require('@/assets/images/banner1.png'), url: 'https://www.bilibili.com/video/BV1MB4y1A7H1/?spm_id_from=333.337.search-card.all.click&vd_source=b6e6401d3db204e471fd9b2bd0676418' },
        { index: 2, pic: require('@/assets/images/banner2.png'), url: 'https://data.stats.gov.cn/search.htm?s=cpi' },
        { index: 3, pic: require('@/assets/images/banner3.png'), url: 'https://www.bilibili.com/video/BV1Fz4y1h7bf/?spm_id_from=333.337.search-card.all.click' }
      ],
      config: {
        data: [],
        waitTime: 500,
        headerHeight: 10
      },
      date: '2023-05',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        mid: null,
        cid: null,
        mname: null
      },
      // 总条数
      total: 0,
      //月份表格数据
      monthList: [],
      // 分类表格数据
      categoryList: [],
      // cpi数据
      cpiList: [],
      rnames: [],
      cpiData: []
    }
  },
  methods: {
    showLin() {
      var chartDom = document.getElementById('yearcpilin')
      var myChart = echarts.init(chartDom)
      var option

      let base = +new Date(2021, 9, 1)
      let oneDay = 24 * 3600 * 1000
      let date = []
      let data = [Math.random() * 20 + 95]
      for (let i = 1; i < 500; i++) {
        var now = new Date((base += oneDay))
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
        //data.push(Math.round((Math.random()* 20+95) * 10 + data[i - 1]));
        data.push(Math.round(Math.random() * 20 + 95))
      }
      option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          }
        },
        title: {
          left: 'center',
          fontSize: 15,
          text: ''
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          //boundaryGap: [0, '100%'],
          min: 95,
          max: 115
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: '日CPI',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }
        ]
      }
      option && myChart.setOption(option)
    },
    showIns() {
      let myMonthCpiIns = this.$echarts.init(document.getElementById('monthcpiins'))
      myMonthCpiIns.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}'
        },
        series: [
          {
            name: 'CPI',
            type: 'gauge',
            min: 90,
            max: 110,
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '65%'], // 仪表盘位置(圆心坐标)
            radius: '130%',

            axisLine: {
              // 仪表盘轴线(轮廓线)相关配置。
              show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
              lineStyle: {
                // 仪表盘轴线样式。
                //color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                //opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                width: 20, //轴线宽度,默认 30。
                //shadowBlur: 20, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                shadowColor: '#fff' //阴影颜色。支持的格式同color。
              }
            },
            progress: {
              show: true
            },
            detail: {
              show: false,
              valueAnimation: true,
              fontSize: 15, // 文字的字体大小,默认 15。
              formatter: '{value}'
            },
            data: [
              {
                value: 103.8,
                name: '当前指数'
              }
            ]
          }
        ]
      })
    },
    showCPIBar() {
      let myCateCpiBar = this.$echarts.init(document.getElementById('catecpibar'))
      myCateCpiBar.setOption({
        xAxis: {
          type: 'category',
          data: ['食品', '衣着', '医疗', '交通', '娱乐', '居住', '服务']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              {
                value: 102.3,
                itemStyle: {
                  color: '#a90000'
                }
              },
              {
                value: 99.8,
                itemStyle: {
                  color: '#a90000'
                }
              },
              {
                value: 103.4,
                itemStyle: {
                  color: '#a90000'
                }
              },
              {
                value: 112.2,
                itemStyle: {
                  color: '#a90000'
                }
              },
              {
                value: 98,
                itemStyle: {
                  color: '#a90000'
                }
              },
              {
                value: 101.1,
                itemStyle: {
                  color: '#a90000'
                }
              },
              {
                value: 99.9,
                itemStyle: {
                  color: '#a90000'
                }
              }
            ],
            type: 'bar'
          }
        ]
      })
    },

    showPol() {
      var chartDom = document.getElementById('trendscpipol')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: [
          {
            text: ''
          }
        ],
        polar: {
          center: ['45%', '50%'], // 中心（圆心）坐标
          radius: [30, '80%']
        },
        angleAxis: {
          max: 160,
          startAngle: 90
        },
        radiusAxis: {
          type: 'category',
          data: ['d', 'w', 'm', 'y']
        },
        tooltip: {},
        series: {
          type: 'bar',
          data: [97, 100, 110, 105],
          coordinateSystem: 'polar',
          label: {
            show: true,
            position: 'middle',
            formatter: '{b}: {c}'
          }
        }
      }

      option && myChart.setOption(option)
    },
    showBar() {
      let myEchartsBar = echarts.init(document.getElementById('bar'))
      myEchartsBar.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0,
            inside: false,
            rotate: 45,
            fontSize: '10'
          },
          data: this.rnames
        },
        yAxis: {
          min: 85,
          max: 115,
          type: 'value'
        },
        series: [
          {
            data: this.cpiData,
            type: 'bar',
            showBackground: true,
            itemStyle: {
              color: 'rgb(52, 110, 242)'
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      })
    },
    setConfig() {
      listMCpi(this.queryParams).then((response) => {
        var newArr = []
        response.rows.map(function (item, index) {
          var sevm = {}
          sevm['name'] = item.rname
          sevm['value'] = Number(item.cpi).toFixed(2)
          newArr.push(sevm)
        })
        this.config = {
          data: newArr
        }
      })
    },
    /** 查询月份列表 */
    getMouthList() {
      listMonth(this.queryParams).then((response) => {
        this.monthList = response.rows
      })
    },
    /** 查询数据管理列表 */
    getCMList() {
      this.queryParams.mname = '2023-05'
      listMCpi(this.queryParams).then((response) => {
        response.rows.forEach((element) => {
          this.rnames.push(element.rname)
          this.cpiData.push(Number(element.cpi).toFixed(2))
        })
        this.showBar()
        this.total = response.total
      })
      this.setConfig()
      this.queryParams.mname = null
    },
    resetArrary() {
      this.rnames = []
      this.cpiData = []
    },
    monthChanged() {
      this.date = this.queryParams.mname
      this.resetArrary()
      listMCpi(this.queryParams).then((response) => {
        this.cpiList = []
        response.rows.forEach((element) => {
          this.rnames.push(element.rname)
          this.cpiData.push(Number(element.cpi).toFixed(2))
        })
        this.showBar()
        this.total = response.total
      })
      this.setConfig()
    }
  },
  created() {
    this.getCMList()
  },
  mounted() {
    this.getMouthList()
    this.showLin()
    this.showIns()
    this.showCPIBar()
    this.showPol()
  }
}
</script>

<style scoped lang="scss">
#app {
  padding: 15px;
}
.el-carousel-item a {
  text-align: center;
}

.el-card {
  padding: 15px;
}
.title {
  display: inline;
  font-size: 22px;
  border-left: 3px solid #409eff;
  font-family: Microsoft Yahei;
}
.fontClass1 {
  font-size: 18px;
  font-family: Microsoft Yahei;
}
.fontClass2 {
  font-size: 36px;
  font-family: Microsoft Yahei;
}
.fontClass3 {
  font-size: 12px;
  font-family: Microsoft Yahei;
}

.dv-scroll-ranking-board {
  color: #3c3f52;
}
</style>
